<template>
  <div class="author">
    <div class="myself">
      <span>作者姓名</span>
      <van-image round fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    </div>
    <div class="shoucang">
      <span>0</span><br>
      <span>被收藏</span>
    </div>
    <div class="hr"></div>
    <div class="msg">
      <span>2021-08-06加入</span>
      <span>还没有简介</span>
    </div>
    <div class="hr"></div>
    <div class="nav">
      <van-tabs v-model="activeName">
        <van-tab title="菜谱" name="1">内容 1</van-tab>
        <van-tab title="作品" name="2">内容 2</van-tab>
        <van-tab title="收藏" name="3">
          <like-list></like-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "2",
    };
  },
};
</script>
<style>
.author {
  padding: 15px;
}
.author .hr {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 0.1px solid #f0f0f0;
}
.author .myself {
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.author .myself span {
  font-size: 24px;
  color: #232323;
  font-weight: bold;
  line-height: 90px;
}
.author .myself .van-image {
  width: 90px;
  height: 90px;
  vertical-align: middle;
}
.author .shoucang > span {
  padding: 5px;
  color: #656565;
  font-size: 12px;
}
.author .msg span {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>